<template>
  <div class="header"> 短网址 /网址缩短
    <div class="app-container">
      <el-form :model="formData" label-width="0px">
        <el-form-item>
          <el-form-item>网址缩短</el-form-item>
          <el-radio-group v-model="formData.generateType">
            <el-button>单个生成</el-button>
            <el-button v-show="false">批量生成</el-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formData.longUrl"
            placeholder="请输入长网址"
            style="width: 80%;"
          />
          <el-button
            type="primary"
            style="width: 15%;"
            @click="shortenUrl"
          >缩短网址</el-button>
        </el-form-item>
        <el-form-item v-show="false">有效期:
          <el-select v-model="formData.expiry">
            <el-option label="长期" value="permanent" />
            <el-option label="短期" value="temporary" />
          </el-select>
        </el-form-item>
      </el-form>

      <div v-if="shortUrlResult" class="result-container">
        <el-card>
          <div slot="header" class="clearfix">
            <span>缩短结果</span>
          </div>
          <div v-if="shortUrlResult && shortUrlResult.shortUrl">
            <p>长网址: <a :href="shortUrlResult.longUrl" target="_blank">{{ shortUrlResult.longUrl }}</a></p>
            <p>短网址: <a :href="shortUrlResult.shortUrl" target="_blank">{{ shortUrlResult.shortUrl }}</a></p>
            <el-button type="primary" size="small" @click="copyShortUrl">
              <i class="icon-copy" />复制短网址
            </el-button>
          </div>
        </el-card>
      </div>

      <el-loading v-model="loading" text="正在处理..." name="load" />
      <el-alert v-if="errorMessage" type="error" :message="errorMessage" show-icon />
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'UrlShorten',
  data() {
    return {
      formData: {
        generateType: 'single',
        longUrl: '',
        expiry: 'permanent'
      },
      shortUrlResult: null,
      loading: false,
      errorMessage: ''
    }
  },
  methods: {
    async shortenUrl() {
      if (!this.formData.longUrl) {
        this.errorMessage = '请输入长网址'
        return
      }
      this.shortUrlResult = null
      this.errorMessage = ''
      this.loading = true

      // 构建请求数据
      const requestData = {
        longUrlParamList: [
          {
            longUrl: this.formData.longUrl // 确保 this.formData.longUrl 已被正确定义和赋值
          }
        ],
        urlType: 1
      }

      // 定义请求的配置项，包括 URL、数据和头部信息
      const config = {
        //
        url: 'https://sq-private-dev2.ghost.aixuexi.com/atlas/shortChan/creatShortChan',
        method: 'post', // 明确指定请求方法为 POST
        data: requestData, // 发送的数据
        headers: {
          'Atlas-TokenKey': '100011', // 确保 TokenKey 的值正确无误
          'Atlas-Token': 'EVKgR0eb' // 确保 Token 的值正确无误
        }
      }
      // [object PointerEvent]
      // 发送请求并处理响应
      axios(config)
        .then(response => {
          this.shortUrlResult = response.data.data[0]
        })
        .catch(error => {
          // 请求失败时的处理逻辑
          console.error('请求出错:', error)
          // 向用户显示错误信息或执行其他错误处理操作
        })

      // try {
      //   // 构建请求数据
      //   const requestData = {
      //     'longUrlParamList': [
      //       {
      //         'longUrl': this.formData.longUrl
      //       }
      //     ],
      //     'urlType': this.formData.expiry === 'permanent' ? 1 : 2
      //   }

      //   // 发送请求
      //   const response = await axios.post(
      //     'https://sq-private-dev2.ghost.aixuexi.com/atlas/shortChan/creatShortChan',
      //     requestData,
      //     {
      //       headers: {
      //         'Atlas-TokenKey': '10002',
      //         'Atlas-Token': 'rR4YXhHo'
      //       }
      //     }
      //   )

      //   if (response.data.success && response.data.data && response.data.data.length > 0) {
      //     this.shortUrlResult = response.data.data[0]
      //   } else {
      //     this.errorMessage = response.data.message || '网址缩短失败'
      //   }
      // } catch (error) {
      //   console.error('请求出错:', error)
      //   if (error.response) {
      //     // 返回错误
      //     this.errorMessage = `错误 ${error.response.status}: ${error.response.data.message || '服务器错误'}`
      //   } else if (error.request) {
      //     // 无响应
      //     this.errorMessage = '无法连接到服务器，请检查网络'
      //   } else {
      //     // 请求设置出错
      //     this.errorMessage = '请求配置错误: ' + error.message
      //   }
      // } finally {
      //   this.loading = false
      // }
    },

    // copyToClipboard(text) {
    //   if (navigator.clipboard) {
    //     navigator.clipboard.writeText(text)
    //       .then(() => {
    //         console.log('复制成功')
    //         this.$message.success('复制成功')
    //       })
    //       .catch(() => {
    //         console.log('复制失败')
    //         this.$message.error('复制失败，请手动复制')
    //       })
    //   } else {
    //     // fallbackCopy(text)
    //   }
    // }
    copyShortUrl() {
    // 检查是否有可用的短网址结果
      if (!this.shortUrlResult || !this.shortUrlResult.shortUrl) {
        this.$message.warning('没有可复制的短网址')
        return
      }

      const shortUrl = this.shortUrlResult.shortUrl

      // 首先尝试使用Clipboard API
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(shortUrl)
          .then(() => {
            this.$message.success('短网址已成功复制到剪贴板')
          })
          .catch(err => {
            console.error('Clipboard API复制失败:', err)
            // 失败时使用备用方法
            this.fallbackCopy(shortUrl)
          })
      } else {
      // 不支持Clipboard API时使用备用方法
        this.fallbackCopy(shortUrl)
      }
    }
    // https://8oc.cn/t/R3MRfqaa
    // function fallbackCopy(text) {
    //   const textarea = document.createElement('textarea')
    //   textarea.value = text
    //   document.body.appendChild(textarea)
    //   textarea.select()
    //   try {
    //     document.execCommand('copy')
    //     this.$message.success('复制成功')
    //   } catch (err) {
    //     this.$message.error('请手动复制')
    //   } finally {
    //     document.body.removeChild(textarea)
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.header{
  font-size: 20px;
  margin: 50px;
}
.app-container {
  size: 20px;
  max-width: 1000px;
  margin: 20px auto;
  padding: 30px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

}
.el-form-item{
  font-size: 40rem;
}

.el-radio-group {
  margin: 0;
  display: flex;
  gap: 1px;

  .el-button {
    padding: 10px 25px;
    border-radius: 2px;
    border: 1px solid #DCDFE6;
    background: #F5F7FA;

    &.is-active {
      background: #409EFF;
      color: white;
      border-color: #409EFF;
    }
  }
}

/* 输入区域容器 */
.el-form-item:nth-child(2) {
  :deep(.el-form-item__content) {
    display: flex;
    gap: 15px;
    align-items: stretch;

    .el-input {
      flex: 1;
      .el-input__inner {
        height: 42px;
        border-radius: 6px;
      }
    }

    .el-button {
      width: 120px;
      height: 42px;
      border-radius: 6px;
      font-size: 14px;
    }
  }
}

/* 有效期选择 */
.el-form-item:last-child {
  :deep(.el-form-item__content) {
    display: flex;
    align-items: center;
    gap: 15px;

    > span {
      font-size: 14px;
      color: #606266;
    }

    .el-select {
      width: 180px;
      .el-input__inner {
        height: 38px;
      }
    }
  }
}

/* 全局调整 */
.el-form-item {
  margin-bottom: 30px;

  &:last-child {
    margin-bottom: 0;
  }
}

::placeholder {
  color: #C0C4CC;
  font-size: 14px;
}

/* 新增：结果区域样式 */
.result-container {
  margin-top: 30px;

  .el-card {
    .el-card__header {
      padding: 10px 20px;
      font-weight: bold;
    }

    p {
      margin-bottom: 10px;
    }

    a {
      color: #409EFF;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
